<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
</head>

<body>
    <!-- 
      隐藏域
      1 也是一个普通的input标签，用到时候 看成 文本框来使用  通过 value属性获取值和设置值
      2 type=hidden  默认看不见！！
      ３　修改　业务中，存放ｉｄ属性，id不需要被修改，所以 看不见 让用户无法修改！！
      
     -->
    <button id="update">修改</button>
    <form>
        <!-- 额外写一个 input标签  -->
        <!-- <input type="text" name="id" style="display: none" /> -->
        <!-- 隐藏域 -->
        <input type="hidden" name="id" />

        <input type="text" name="username" />
        <input type="text" name="age" />
        <button>提交</button>
    </form>

    <script src="./form-serialize.js"></script>
    <script>
        const form = document.querySelector("form");
        const updateBtn = document.querySelector("#update");
        // 点击修改按钮的时候
        const obj = {
            id: 10,
            username: "八戒",
            age: 22,
        };

        // 注意： 声明了一个全局变量 id
        // let id;

        updateBtn.addEventListener("click", function (e) {
            for (const key in obj) {
                const target = document.querySelector(`[name=${key}]`);
                if (target) {
                    target.value = obj[key];
                }
            }

            // 点击修改 给id赋值
            // id = obj.id;
        });

        form.addEventListener("submit", function (e) {
            e.preventDefault();
            // 快速获取表单数据
            const data = serialize(form, { hash: true, empty: true });
            // console.log(id);
            console.log(data);
        });
    </script>
</body>

</html>